React Flow
https://gyazo.com/372f48bc8b2edca3a7c5cac0bbf34be0
サブフロー
gropingするやつ
dev tool
nodrag
className="nodrag"がついてるものを触ったときはノードが動かないようになる
Concepts
Getting Started
Customizing React Flow
Custom Nodes
Custom Node Props
Custom Edges
Custom Edge Props
Theming
Layouting
Layouting Libraries
Sub-Flows
Advanced Use
Accessibility
Testing
TypeScript
Uncontrolled Flows
State Management
Devtools
Tutorials
Web Audio API
Mind Map App
Troubleshooting
Common Errors
Remove Attribution
Migrate to v11
Migrate to v10
API Reference
<ReactFlow />
<ReactFlowProvider />
Components
<Background />
<BaseEdge />
<ControlButton />
<Controls />
<EdgeLabelRenderer />
<EdgeText />
<Handle />
<MiniMap />
<NodeResizer />
<NodeResizeControl />
<NodeToolbar />
<Panel />
Hooks
useConnection
useHandleConnections()
useNodesData()
useEdges()
useEdgesState()
useKeyPress()
useNodeId()
useNodes()
useNodesInitialized()
useNodesState()
useOnSelectionChange()
たぶんNode内やEdge内で呼ぶ
callbackを渡す
そのNodeが選択されるとそのcallbackが発火する
useOnViewportChange()
useReactFlow()
useStore()
useStoreApi()
useUpdateNodeInternals()
useViewport()
Types
BackgroundVariant
Connection
ConnectionLineComponentProps
ConnectionLineType
CoordinateExtent
DefaultEdgeOptions
Edge
EdgeChange
EdgeMarker
EdgeProps
FitViewOptions
MarkerType
MiniMapNodeProps
Node
NodeChange
NodeProps
PanOnScrollMode
PanelPosition
Position
ProOptions
ReactFlowInstance
ReactFlowJsonObject
ResizeParams
Viewport
NodeOrigin
XYPosition
Utils
addEdge()
applyEdgeChanges()
applyNodeChanges()
getBezierPath()
getConnectedEdges()
getIncomers()
getMarkerEnd()
getNodesBounds()
getOutgoers()
getRectOfNodes()
getSimpleBezierPath()
getSmoothStepPath()
getStraightPath()
getTransformForBounds()
getViewportForBounds()
isEdge()
isNode()
updateEdge()
reconnectEdge()